<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="../VUE/min.Vue"></script>
<body>
    <!-- 
        1. Vue中常用的按键别名：
                回车 => enter
                删除 => delete (捕获删除(delete)和退格(backspace)键)
                退出 => esc
                空格 => space
                换行 => tab
                上 => up
                下 => down
                左 => left
                右 => right

        2.Vue未提供别名的按键，可以使用按键原始的key去绑定，但注意要转化为
          keybab-case (短横线命名)   
          例如：CapsLock(切换大小写键)要转换为 caps-lock

        
        3.系统修饰键(用法特殊) : ctrl、alt、shift、meta(window键)
                (1) 配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
                (2) 配合keydown使用:正常触发事件

        4.按键别名可以连用，
     -->



     
     <div id="root">
         <!-- 但在Vue中只需要使用按键别名即可，在模板代码的事件后添加即可 -->
         <!-- <input type="text" placeholder="请输入内容" @keyup.enter = "showVal"> -->

         <!-- keyup事件添加ctrl、alt、shift、meta按键别名，就需要按下其他键才会触发事件 -->
         <!-- <input type="text" placeholder="请输入内容" @keyup.ctrl = "showVal"> -->

         <!-- keyup事件只有当抬起ctrl和c键的时候才能触发事件，那么就需要案件别名连用,此时ctrl加其他任何键都不会触发事件了 -->
         <input type="text" placeholder="请输入内容" @keyup.ctrl.c = "showVal">
         
     </div>
</body>
</html>
<script>
    new Vue({
        el:'#root',
        methods:{
            showVal(e){
                // 需要只有当按下回车键时才触发输出语句，原生js中需要做判断
                // 但在Vue中只需要使用按键别名即可，在模板代码的事件后添加即可
                console.log(e.target.value);
            }
        }
    })
</script>